<template>
	<div class="sale">
		<div class="top_button">
			<div class="partition"></div>
		</div>

		<el-table
			:data="
				sale.filter(
					data =>
						!search ||
						data['商品编码']
							.toLowerCase()
							.includes(search.toLowerCase()) ||
						data['商品名称']
							.toLowerCase()
							.includes(search.toLowerCase())
				)
			"
			border
			height="calc(100vh - 90px)"
			v-loading="isres"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)"
			style="width: 100%"
			row-key="商品编码"
		>
			<el-table-column
				type="index"
				width="50"
				label="序号"
			></el-table-column>
			<el-table-column
				v-for="(col, i) in cols"
				:key="i"
				:prop="col"
				:label="col"
				:min-width="colsAttr[col]"
				sortable
			></el-table-column>
			<el-table-column align="right" width="140" type="expand">
				<template #header>
					<el-input
						v-model="search"
						size="mini"
						placeholder="输入关键字搜索"
					/>
				</template>
				<template #default="props">
					<el-table
						style="width: 100%"
						border
						:show-summary="true"
						:data="
							alldata.filter(data => {
								if (!data['商品编码']) {
									return;
								}
								return (
									!props.row['商品编码'] ||
									data['商品编码'].includes(
										props.row['商品编码']
									)
								);
							})
						"
					>
						<el-table-column
							type="index"
							width="50"
							label="序号"
						></el-table-column>
						<el-table-column
							v-for="(col, i) in slotcols"
							:key="i"
							:prop="col"
							:label="col"
							sortable
						></el-table-column>
						<el-table-column fixed="right" width="200">
							<template #default="scope">
								<div class="update" style="display:flex;">
									<div>
										<el-input
											v-model="scope.row.inputprocreate"
											tr="current-row-key"
											placeholder="修改生产日"
											class="num"
										></el-input>
										<el-input
											v-model="scope.row.inputdqr"
											tr="current-row-key"
											placeholder="修改到期日"
											class="num"
										></el-input>
										<el-input
											v-model="scope.row.inputnum"
											tr="current-row-key"
											placeholder="修改数量"
											class="num"
										></el-input>
									</div>

									<el-button
										class="baocun"
										@click="
											preservation(
												scope.row.id,
												scope.row['数量'],
												scope.row['到期日'],
												scope.row['生产日'],
												scope.row.inputnum,
												scope.row.inputprocreate,
												scope.row.inputdqr
											)
										"
										type="primary"
										style="width: 100%"
										plain
										>保存</el-button
									>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<tool :multipleTable="sale"></tool>
</template>
<script>
import { reactive, toRefs } from "vue";
import { big, selprolist, updqr } from "@/api/pandian";
import { ElMessage } from "element-plus";
import tool from "./components/tool";
export default {
	components: {
		tool
	},
	setup() {
		const data = reactive({
			cols: [],
			sale: [],
			alldata: [],
			slotcols: [],
			isres: false,
			search: "",
			colsAttr: {
				商品名称: "200"
			}
		});
		const loaded = async () => {
			data.isres = true;

			const result = await big.get();
			data.isres = false;
			if (result.data.length == 0) {
				data.sale = [];
				ElMessage.success({
					message: "还没有盘呢",
					type: "success"
				});
			} else {
				data.sale = result.data;
				data.cols = Object.keys(result.data[0]);
			}

			const res = await selprolist.post({ ck: "大仓" });
			console.log(res);
			data.alldata = res.data;
			data.slotcols = Object.keys(res.data[0]);
		};

		const preservation = async (
			id,
			num,
			dqr,
			procreate,
			newnum,
			newdqr,
			newprocreate
		) => {
			const result = await updqr.post({
				id,
				upnum: newnum ? newnum : num,
				updqr: newdqr ? newdqr : dqr,
				upprocreate: newprocreate ? newprocreate : procreate
			});
			if (result.code == 200) {
				ElMessage.success({
					message: "恭喜你，这是一条成功消息",
					type: "success"
				});
				data.alldata.filter(data => {
					if (data["id"] == id) {
						data["数量"] = newnum ? newnum : num;
						data["到期日"] = newdqr ? newdqr : dqr;
						data["生产日"] = newprocreate
							? newprocreate
							: procreate;
					}
				});
			} else {
				ElMessage.success({
					showClose: true,
					message: "错了哦，这是一条错误消息",
					type: "error"
				});
			}
		};
		loaded();
		return { ...toRefs(data), preservation };
	}
};
</script>
